<template>
	<view class="look_condition">
		<view class="heda">
			<view>
				<view>{{title}}</view>
				<view style="font-size: 24rpx;">共{{list.length}}章</view>
			</view>
			<view >
				<view>
					<u-icon name="arrow-downward" v-if="isFlashback"></u-icon>
					<u-icon name="arrow-upward" v-else></u-icon>
				</view>
				<view  style="font-size: 24rpx;" @click="clickSort">{{isFlashback?'倒序':'正序'}}</view>
			</view>
		</view>
		<view class="content">
			<view v-for="item in list" :class="currentId==item.id?'con':''" @click="clickItem(item)">
			{{sectionTitle(item)}}
			</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from "vuex"
	export default {
		data() {
			return {
				currentId:'',
				isFlashback:true,
				list:[],
				title:''
			}
		},
		computed:{
			sectionTitle(){
				return (item)=>{
					item.title=item.title.replace(/[正文 ]/,'')
					return item.title
				}
			}
		},
		onLoad({id,title}) {
			this.title=title
			this.getConditionList(id)
		},
		onBackPress(e){
		  // console.log("监听返回按钮事件",e);
		 this.setBaseUrl('/api')
		},
		methods: {
			...mapMutations ({
				setBaseUrl:'setBaseUrl'
			}),
			clickItem(item){
				this.currentId=item.id
				this.setBaseUrl('/chapter2')
				uni.navigateTo({
					url:"../content/content?link="+item.link
				})
			},
			clickSort(){
				this.list.reverse()
				this.isFlashback=!this.isFlashback
			},
			getConditionList(id){
				this.$request({
					url: '/toc',
					dataType: 'json',
					sslVerify: false,
					data:{
						view:'summary',
						book:id
					},
					method: 'GET',
				}).then(res => {
					let data = res[1].data
					this.$request({
						url: '/atoc/'+data[0]._id,
						dataType: 'json',
						sslVerify: false,
						data:{
							view:'chapters',
						},
						method: 'GET',
					}).then(res=>{
						this.list=res[1].data.chapters
						this.currentId=this.list[0].id
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.look_condition{
		height: 100%;
		display: flex;
		flex-direction: column;
		
		.heda{
			display: flex;
			padding: 20rpx;
			view{
				line-height: 40rpx;
			}
			&>view:first-child{
				flex: 1;
			}
		}
		
		.content{
			flex: 1;
			overflow-y: auto;
			margin-top: 20rpx;
			view{
				line-height: 60rpx;
				padding: 0 40rpx;
				border-bottom: 1rpx solid #C0C0C0;
				font-size: 24rpx;
				color: #d0c8c8;
			}
			.con{
				color: #2da79b;
			}
		}
	}
</style>
